import React, { useState, useEffect } from 'react'

import styles from './index.css'

import { Breadcrumb, Button, Input, Table, Pagination } from 'antd'


//引入ts文件



import Footer from '@/components/Footer'

function SearchRecords(props: any) {

  useEffect(() => {
    props.dispatch({
      type: 'search/setsearch'
    })
  }, [])
  console.log(props.search);

  //搜索数据
  const [count, setcount] = useState('')
  const [keyword, setkeyword] = useState('')
  const [updateAt, setupdateAt] = useState('')

  const columns = [
    {
      title: '搜索词',
      dataIndex: 'keyword',

    },
    {
      title: '搜索量',
      dataIndex: 'count',
    },
    {
      title: '搜索时间',
      dataIndex: 'updateAt',
    },
    {
      title: "操作",
      // dataIndex: 'delete '
      render: (text: any) =>
        <a onClick={() => {
          // console.log(text);
          props.dispatch({
            type: 'search/searchdelete',
            id: text.id
          })
        }
        }>删除</a>,
    }

  ];
  const onChange = (page:any,pageSize:any) => {
    console.log(page,pageSize);
    Pagination.current = page;
    props.dispatch({
      type: 'search/setsearch',
      page,
      pageSize
    })
    
  }
  const onShowSizeChange=(current: any, pageSize: any)=> {
    Pagination.current=1
    Pagination.pageSize=pageSize;
  }
  const Pagination = {
    pageSizeOptions:['4','8','12','16'],
    pageSize:12,
    total:props.search.searchdata[1],
    current: 1,
    showSizeChanger: true,
    onShowSizeChange: (current: any, pageSize: any) => onShowSizeChange(current, pageSize),
    onChange: (page: any, pageSize: any) => onChange(page, pageSize),
    defaultCurrent: 1,
    
  }
  const rowSelection = {
    onChange: (selectedRowKeys: any, selectedRows: any) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
  };
  const handlereset = () => {

  }
  return (
    <div className={styles.SearchRecord}>
      <Breadcrumb className={styles.nav}>
        <Breadcrumb.Item href="/">工作台</Breadcrumb.Item>
        <Breadcrumb.Item href="/home/SearchRecord/SearchRecord">搜索记录</Breadcrumb.Item>
      </Breadcrumb>
      <div className={styles.input}>
        类型:<Input placeholder="请输入类型" value={count} onChange={(e) => setcount(e.target.value)} />
        搜索词:<Input placeholder="请输入搜索词" value={keyword} onChange={(e) => setkeyword(e.target.value)} />
        搜索量:<Input placeholder="请输入搜索量" value={updateAt} onChange={(e) => setupdateAt(e.target.value)} />
        <div className={styles.button}>
          <Button type="primary" onClick={() => props.dispatch({
            type: 'search/setsearch',
            count,
            keyword,
            updateAt
          })}>搜索</Button>
          <Button onClick={handlereset}>重置</Button>
        </div>
      </div>
      <Table rowSelection={rowSelection} columns={columns} dataSource={props.search.searchdata[0]} pagination={Pagination} />
      <Footer></Footer>
    </div>
  )
}
export default SearchRecords
